<template>
  <div>
    <el-menu
             :default-active="activeIndex"
             class="el-menu-demo" 
             mode="horizontal" 
             @select="handleSelect">
        <el-menu-item index="/home">首页</el-menu-item>
        <el-menu-item index="/home/cart">购物车</el-menu-item>
        <el-menu-item index="/home/order">订单中心</el-menu-item>
        <el-menu-item v-if="this.permission == 0" index="/home/user-management">用户管理页面</el-menu-item>
        <el-menu-item v-if="this.permission == 0" index="/home/goods-management">商品管理</el-menu-item>
        <el-menu-item v-if="this.permission == 0" index="/home/order-management">订单管理</el-menu-item>
    </el-menu>
    <router-view />
  </div>
</template>

<script>

export default {
  data() {
    return {
      activeIndex: '/home',
      permission: this.$store.state.permission
    };
  },
  methods: {
    handleSelect(key) {
      this.$router.push(key)
    }
  },
  created () {
    this.activeIndex = this.$route.path
  }
}
</script>

<style>
img {
  width: 100px;
  height: 100px;
  border-radius: 5px;
}
</style>